<template>
  <div style="padding: 15px;">
    <el-form ref="form"  :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="任务号">
              <el-input v-model="form.code" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="关联单号">
              <el-input v-model="form.sourceCode" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="任务类型">
              <el-input v-model="form.taskType" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="作业人">
              <el-input v-model="form.operatorName" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
    </el-form>
    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      :align="allAlign"
      :data="tableData"
      show-footer
      :footer-method="footerMethod"
      :edit-config="{trigger: 'click', mode: 'cell'}">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="goodsName" title="商品名称"  width="270"></vxe-table-column>
      <vxe-table-column field="goodCode" title="商品编码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsBarCode" title="商品条码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsUnitName" title="单位"  width="270" ></vxe-table-column>
      <vxe-table-column field="planQuantity" title="计划数量"  width="120"></vxe-table-column>
      <vxe-table-column field="jobQuantity" title="作业数量"  width="120"></vxe-table-column>

      <vxe-table-column field="containerBarCode" title="容器号"  width="120" ></vxe-table-column>
      <vxe-table-column field="goodsStatusName" title="货品状态"  width="120" ></vxe-table-column>
      <vxe-table-column field="gmtManufacture" title="生产日期"  width="120"></vxe-table-column>
      <vxe-table-column field="gmtExpire" title="过期日期"  width="120"></vxe-table-column>
      <vxe-table-column field="receiveLot" title="收货批次"  width="120"></vxe-table-column>
    </vxe-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
    </div>

  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import VXETablePluginElement from 'vxe-table-plugin-element'
  import 'vxe-table-plugin-element/dist/style.css'
  import goodsSelect from '@/views/components/goodsElSelect.vue'
  import { tasksDetail} from '@/api/store'
  import {getWarehouse, findShipmentPartys, getDictList} from '@/api/basicInfo'

  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
  VXETable.use(VXETablePluginElement)
  export default {
    name: 'Parent',
    components: {
      goodsSelect,
    },
    data() {
      return {
        allAlign:'center',
        warehouseData:[],
        shipmentData:[],
        typeList: [],
        dictType: 'collectType',
        isDisable:false,   //确定键显示按钮
        typeList: [
          { code: "0", name: "仓库领用" },
          { code: "1",name: "财务领用" }
        ],
        form: {
          code:'',
          operatorName: '',
          taskType:'',
          sourceCode:"",
        },
        loading: false,
        tableData: [],
      }
    },
    created() {
      this.getInfo();

      // this.getWarehouse().then(()=>{
      //   this.getShipmentParties();
      //   this.getDictList(this.dictType);
      // });
    },
    methods: {
    // 获取页面信息
    getInfo() {
      this.loading = true;
      let code = this.$route.query.code ? this.$route.query.code : "";
      tasksDetail(code).then((response) => {
        this.form = response.data;
        this.tableData = response.data.items;
        this.loading = false;
      });
    },
        // 返回
    funcSubmitCheck() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },

      // 入驻商查询
      getShipmentParties(){
        findShipmentPartys().then(response => {
          this.shipmentData = response.data;
        })
      },
      // 仓库查询
      getWarehouse(){
        return getWarehouse().then(response => {
          this.warehouseData = response.data;
        })
      },
      // 单据类型字典查询
      getDictList(dictType){
        getDictList(dictType).then(response => {
          this.typeList = response.data[0].dictList;
          this.getInfo();
        })
      },
      // 选择入驻商
      setCustomerCode(value) {
        this.form.shipmentCode = value;
        this.tableData = [];
      },
      // 商品选择
      setGoodsCode(row){
        let obj = this.$refs.goodsSelect.obj
        row.goodsName = obj.value;
        row.goodsCode = obj.code;
        row.productCode = obj.goodCode;
        row.goodsUnit = obj.unitCode;
        row.goodsBarCode = obj.barCode;
        row.goodsUnitConversionList = obj.goodsUnitConversionList;
      },
      // 单位选择
      selectGoodsUnitCode(event, row){
        row.goodsUnit = event.value;
        row.unitName = event.label;
      },
      // 公共取消
      // fatherItemCancel(modelFlag) {
      //   switch (modelFlag) {
      //     case 'add':
      //       this.modelAddFlag = false
      //       break
      //     case 'edit':
      //       this.modelEditFlag = false
      //       break
      //     default:
      //   }
      // },
      // 新增
      // insertEvent (row) {
      //   if (this.form.shipmentCode && this.form.warehouseCode) {
      //     let record = {};
      //     let {row: newRow} = this.$refs.xTable.insertAt(record, row);
      //     this.$refs.xTable.setActiveCell(newRow, 'goodsName');
      //   } else {
      //     this.$message.error('仓库、入驻商不能为空')
      //   }
      // },
      // 删除
      // removeEvent (row) {
      //   this.$XModal.confirm('您确定要删除该数据?').then(type => {
      //     if (type === 'confirm') {
      //       this.$refs.xTable.remove(row)
      //     }
      //   })
      // },
      // 保存
      // funcSubmitSave() {
      //   this.form.collectItemList = this.$refs.xTable.tableData;
      //   this.form.status = 0;
      //   const data = this.form;
      //   if (!this.$refs.xTable.tableData.length) {
      //     this.$message.error('请新增明细')
      //   } else {
      //     this.$refs['form'].validate((valid) => {
      //       if (valid) {
      //         this.$refs.xTable.validate((valids) => {
      //           if(valids){
      //             this.isDisable = true
      //             collectEdit(data).then(response => {
      //               this.$message({ message: response.msg, type: 'success' })
      //               this.$emit('fatherEditMethod')
      //               this.isDisable = false
      //             }).then(() => {
      //               this.tableData = []
      //               this.form = {}
      //             }).catch(() => this.isDisable = false)
      //           }else {
      //             return false
      //           }
      //         })
      //       } else {
      //         return false
      //       }
      //     })
      //   }
      // },
      // // 提交
      // funcSubmitCheck() {
      //   this.form.collectItemList = this.$refs.xTable.tableData;
      //   this.form.status = 1;
      //   const data = this.form
      //   if (!this.$refs.xTable.tableData.length) {
      //     this.$message.error('请新增明细')
      //   } else {
      //     this.$refs['form'].validate((valid) => {
      //       if (valid) {
      //         this.$refs.xTable.validate((valids) => {
      //           if(valids){
      //             this.isDisable = true
      //             collectEdit(data).then(response => {
      //               this.$message({ message: response.msg, type: 'success' })
      //               this.$emit('fatherEditMethod')
      //               this.isDisable = false
      //             }).then(() => {
      //               this.tableData = []
      //               this.form = {}
      //             }).catch(() => this.isDisable = false)
      //           }else {
      //             return false
      //           }
      //         })
      //       } else {
      //         return false
      //       }
      //     })
      //   }
      // },
      footerMethod ({ columns, data }) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 1) {
              return '合计'
            }
            if (['planQuantity'].includes(column.property)) {
                return XEUtils.sum(data, column.property).toFixed(3)
            }
            if (['jobQuantity'].includes(column.property)) {
                return XEUtils.sum(data, column.property).toFixed(3)
            }

            return '-'
          })
        ]
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 150px auto;
    width: 175px;
    // float: right;
  }
</style>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .vxe-toolbar{padding:0 0 10px 0}
</style>
